<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="对账历史"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-date-picker
          v-model="params.register_date"
          @change="getData()"
          type="year"
          value-format="yyyy"
          placeholder="对账日期"
          class="date-picker-ml"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      @sort-change="handleSortChange"
      :data="tableData"
    >
      <template v-slot:des="scope">
        <div class="text-truncate" :title="scope.row.diff_des">{{ scope.row.diff_des }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { dateFormat } from '@vimi/utils-tool'
export default {
  props: {
    visible: Boolean,
    rowId: String,
  },
  data() {
    return {
      tableName: 'credit_agency_capital_register',
      order: {
        register_date: 'desc',
      },
      params: {
        index: 1,
        size: 12,
      },
      loading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '对账日期', prop: 'register_date', align: 'center', sortable: 'custom' },
          process: v => dateFormat(v, 'yyyy年MM月dd日'),
        },
        { attrs: { label: '初始金额', prop: 'init_funds', align: 'center' } },
        { attrs: { label: '当前余额', prop: 'current_funds', align: 'center' } },
        { attrs: { label: '变动金额', prop: 'diff_funds', align: 'center' } },
        { attrs: { label: '变动原因', prop: 'diff_des', align: 'center' }, slot: 'des' },
      ],
    }
  },
  watch: {
    rowId: {
      handler: function () {
        this.params['credit_agency_capital_id.eq'] = this.rowId
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getData(index = 1) {
      if (!this.rowId) {
        return
      }
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSortChange({ order }) {
      this.order = {
        register_date: order === 'ascending' ? 'asc' : 'desc',
      }
      this.getData()
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
